<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="ISUX">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <title>火堆</title>
    <link rel="stylesheet" type="text/css" href="../css/project_launch_2.0.css">
</head>

<body>
    <!-- <div class="out-hint">
        <p>登录火堆电脑端：www.huodui.org</p>
        <p>体验更便捷的项目编辑功能</p>
    </div> -->
    <form action="" class="ui-form form-common2">
        <div class="step step1">
            <footer class="ui-footer ui-footer-stable ui-border-t">
                <div class="ui-footer-btns">
                    <button type="button" class="btn-save-all btn-footer btn-yellow">保存</button>
                    <button type="button" class="btn-submit-all btn-footer btn-red">提交审核</button>
                </div>
            </footer>
            <section class="ui-container">
                <div class="ui-placehold-img form-img-bg">
                    <input type="file">
                    <span style="display: none; background-image: url(../images/demo/demo-project-1.jpg);"></span>
                    <div class="hint">点击可替换图片</div>
                    <div class="btn-add-box">
                        <img src="../images/btn-camera.png" alt="">
                        <p>点击添加封面图片</p>
                    </div>
                </div>
                <div class="u-module">
                    <div class="ui-form-item ui-form-item-show ui-border-tb">
                        <label for="#">标题</label>
                        <input type="text" placeholder="例: 为山区孩子上一节梦想课" id="title" data-length="15">
                        <div class="form-unit count">15</div>
                    </div>
                    <div class="ui-form-item ui-form-item-textarea ui-border-b">
                        <label for="#">摘要</label>
                        <textarea id="summary" placeholder="例：每天3元为贫困学童提供免费午餐，让山区孩子远离饥饿的世界。每天3元为贫困学童提供免费午餐，让山区。" data-length="50"></textarea>
                        <div class="form-unit count">50</div>
                    </div>
                </div>
                <div class="u-module">
                    <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-tb">
                        <label for="#">类型</label>
                        <select name="" id="">
                            <option value="" selected disabled>选择类型</option>
                            <option value="">培训活动</option>
                            <option value="">教学物资</option>
                            <option value="">学术创新</option>
                            <option value="">其他</option>
                        </select>
                    </div>
                    <div class="ui-form-item ui-form-item-link ui-border-b">
                        <label for="#">详情</label>
                        <input id="linkStep2" type="text" placeholder="用朴实的语言讲述你或他们的故事" readonly onclick="goStep(2);$('.step2 .detail-content').addClass('show')">
                    </div>
                </div>
                <div class="u-module">
                    <div class="ui-form-item ui-form-item-show ui-border-tb">
                        <label for="#">天数</label>
                        <input type="number" placeholder="范围1-99天(提交后不可修改)">
                        <div class="form-unit">天</div>
                    </div>
                    <div class="ui-form-item ui-form-item-link ui-border-b">
                        <label for="#">清单</label>
                        <input id="linkStep3" type="text" placeholder="添加筹集内容(提交后不可修改)" readonly onclick="goStep(3)">
                    </div>
                </div>
            </section>
        </div>
        <!-- step2 详情页 -->
        <div class="step step2">
            <footer class="ui-footer ui-footer-stable ui-border-t">
                <div class="ui-footer-btns">
                    <button type="button" class=" btn-footer btn-red" onclick="compStep2()">完成</button>
                </div>
            </footer>
            <section class="ui-container">
                <div class="header-line">
                    <i class="sf ui-icon-return" onclick=""></i>
                    <a href="#"><i>i</i>查看示例</a>
                    <div class="ct">图文详情</div>
                </div>
                <p class="hint ui-border-t">可使用 <b>#小标题内容#</b> 制作个性化小标题<i class="sf u-ic-close" onclick=""></i></p>
                <div class="detail-content ui-border-t">
                    <textarea id="bgDesc" placeholder="用朴实的语言讲述你或者他们的故事k，让公众理解你发起项目的原因和独特价值。比如、为什么寻求支持/接触到的群体真实需求/你准备做些什么及计划等。" data-length="800"></textarea>
                    <div class="form-unit count">800</div>
                    <b class="btn-pull"><img src="../images/btn-pull.png" alt=""></b>
                </div>
                <div class="line">图文描述（限10张）</div>
                <div class="form-imgs move" data-index="1">
                    <div class="img-line ui-border-t">
                        <input type="file" id="1">
                        <div class="img-box">
                            <img class="move-top" src="../images/btn-move-top.png" alt="">
                            <img class="move-down" src="../images/btn-move-down.png" alt="">
                        </div>
                        <div class="content">
                            <b class="btn-del">&times;</b>
                            <textarea placeholder="照片描述"></textarea>
                        </div>
                    </div>
                </div>
                <div class="btn-add-img">+上传照片（点击照片排序）</div>
            </section>
        </div>
        <!-- step3 详情页 -->
        <div class="step step3">
            <footer class="ui-footer ui-footer-stable ui-border-t">
                <div class="ui-footer-btns">
                    <button type="button" class=" btn-footer btn-red" onclick="compStep3()">完成</button>
                </div>
            </footer>
            <section class="ui-container">
                <div class="ui-module ui-border-tb">
                    <!-- <ul class="ui-row momeny-list">
                        <li class="ui-col ui-col-50 ui-border-b">
                            <p class="ui-nowrap">品名</p>
                        </li>
                        <li class="ui-col ui-col-30 ui-border-b">
                            <p class="ui-nowrap">单价（元）</p>
                        </li>
                        <li class="ui-col ui-col-20 ui-border-b">
                            <p class="ui-nowrap">数量</p>
                        </li>
                        <li class="ui-col ui-col-50 ui-border-b">
                            <p class="ui-nowrap">篮球篮球篮球</p>
                        </li>
                        <li class="ui-col ui-col-30 ui-border-b">
                            <p class="ui-nowrap">50.00</p>
                        </li>
                        <li class="ui-col ui-col-20 ui-border-b">
                            <p class="ui-nowrap">x10</p>
                        </li>
                        <li class="ui-col ui-col-50 ui-border-b">
                            <p class="ui-nowrap">足球</p>
                        </li>
                        <li class="ui-col ui-col-30 ui-border-b">
                            <p class="ui-nowrap">50.00</p>
                        </li>
                        <li class="ui-col ui-col-20 ui-border-b">
                            <p class="ui-nowrap">x10</p>
                        </li>
                    </ul> -->
                    
                    <div class="lists">
                        <ul class="ui-row momeny-list head">
                            <li class="ui-col ui-col-50 ui-border-b"><p class="ui-nowrap">品名</p></li>
                            <li class="ui-col ui-col-30 ui-border-b"><p class="ui-nowrap">单价</p></li>
                            <li class="ui-col ui-col-20 ui-border-b"><p class="ui-nowrap">数量</p></li>
                        </ul>
                        <ul class="ui-row momeny-list ui-arrowlink" indexpoint="2" id="fundraise-show2">
                            <li class="ui-col ui-col-50 ui-border-b"><p class="ui-nowrap">123123</p></li>
                            <li class="ui-col ui-col-30 ui-border-b"><p class="ui-nowrap">￥1</p></li>
                            <li class="ui-col ui-col-20 ui-border-b"><p class="ui-nowrap">x1</p></li>
                        </ul>
                    </div>

                    <div class="btn-add-thing ui-border-b ui-arrowlink">+添加条目</div>
                    <div class="total">
                        合计 : <span class="price all">200.80</span>元
                    </div>
                </div>
                <div class="new-list-cover">
                    <footer class="ui-footer ui-footer-stable ui-border-t">
                        <div class="ui-footer-btns">
                            <button type="button" class=" btn-footer btn-gray btn-del">删除</button>
                            <button type="button" class=" btn-footer btn-red btn-save">保存</button>
                        </div>
                    </footer>
                    <div class="new-list">
                        <div class="top">
                            <span class="btn-close"></span> 请确认清单内容
                        </div>
                        <div class="ui-form-item ui-form-item-show ui-border-tb">
                            <label for="#">品名</label>
                            <input id="itemName" type="text" placeholder="筹集单项名称，如”篮球“" data-length="10">
                            <div class="form-unit count">10</div>
                        </div>
                        <div class="ui-form-item ui-form-item-show ui-border-b">
                            <label for="#">单价</label>
                            <input type="number" placeholder="输入单项金额，如5.34">
                            <div class="form-unit">元</div>
                        </div>
                        <div class="ui-form-item ui-form-item-show ui-border-b">
                            <label for="#">数量</label>
                            <input type="number" placeholder="范围 1~999">
                        </div>
                        <div class="total">
                            合计 : <span class="price">200.80</span>元
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </form>
    <div class="dialog-step">
        <div class="dialog-box">
            <h4>项目名称（参考示例）</h4>
            <div class="txt">
                项目描述
                <p>我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年</p>
                <img src="../images/demo/demo-sl-1.jpg" alt="">
                <p>我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年</p>
                <img src="../images/demo/demo-sl-1.jpg" alt="">
                <p>我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年我们是一批热爱劳动的青年</p>
                <img src="../images/demo/demo-sl-1.jpg" alt="">
            </div>
            <div class="btn-red btn-close">我知道了</div>
        </div>
    </div>
    <script src="../frozen/lib/zeptojs/zepto.min.js"></script>
    <script src="../frozen/js/frozen.js"></script>
    <script>
    (function() {
        $('.form-common2 .ui-placehold-img.form-img-bg input[type=file]').change(function() {
            //返回的图片路劲
            var url = '../images/demo/demo-project-2.jpg);'; // 当前为测试值
            $(this).siblings('.btn-add-box').hide().siblings('.hint').show().siblings('span').show().css('background-image', 'url(' + url + ')');
        });

        $('.step2 .detail-content .btn-pull').click(function() {
            $(this).parent().toggleClass('show');
        })
        $('.step2 .detail-content textarea').focus(function() {
            $(this).parent().addClass('show');
        });

        $('.step2 .line a').click(function() {
            $('.dialog-step').addClass('show');
        });
        $('.dialog-step .dialog-box .btn-close').click(function() {
            $('.dialog-step').removeClass('show');
        });

        $('.step3 .btn-add-thing').click(function() {
            $('.new-list-cover').addClass('show');
        });
        $('.step3 .lists').on('click', '.momeny-list.ui-arrowlink', function() {
            // 需把当前条目数据传入
            $('.new-list-cover').addClass('show');
        });
        $('.new-list-cover .new-list .top .btn-close').click(function() {
            $('.new-list-cover').removeClass('show');
        });


        // 绑定对应元素的字数校验事件
        var bind_name = 'input';
        if (navigator.userAgent.indexOf("MSIE") != -1) {
            bind_name = 'propertychange';
        }
        $('#title').bind(bind_name, function() {
            checkWords(this, $(this).attr('data-length'));
        })
        $('#title').blur(function() {
            if ($(this).val().length > $(this).attr('data-length')) {
                $(this).val($(this).val().substr(0, $(this).attr('data-length')));
            }
        });
        $('#summary').bind(bind_name, function() {
            checkWords(this, $(this).attr('data-length'));
        })
        $('#summary').blur(function() {
            if ($(this).val().length > $(this).attr('data-length')) {
                $(this).val($(this).val().substr(0, $(this).attr('data-length')));
            }
        });
        $('#itemName').bind(bind_name, function() {
            checkWords(this, $(this).attr('data-length'));
        })
        $('#itemName').blur(function() {
            if ($(this).val().length > $(this).attr('data-length')) {
                $(this).val($(this).val().substr(0, $(this).attr('data-length')));
            }
        });
        $('#bgDesc').bind(bind_name, function() {
            checkWords(this, $(this).attr('data-length'));
        })
        $('#bgDesc').blur(function() {
            if ($(this).val().length > $(this).attr('data-length')) {
                $(this).val($(this).val().substr(0, $(this).attr('data-length')));
            }
        });


        // 图文相关的操作js
        $('.step2').on('click', '.form-imgs', function() {
            if ($(this).hasClass('move')) {
                $(this).removeClass('move').find('.img-line.move').removeClass('move');
            }
        });
        $('.step2 .form-imgs').on('click', '.img-line .img-box .move-top', function(e) {
            var $cur = $(this).parents('.img-line');
            $cur.after($cur.prev());
            e.stopPropagation();
        });
        $('.step2 .form-imgs').on('click', '.img-line .img-box .move-down', function(e) {
            var $cur = $(this).parents('.img-line');
            $cur.before($cur.next());
            e.stopPropagation();
        });
        $('.step2 .form-imgs').on('click', '.img-line .content .btn-del', function() {
            $(this).parents('.img-line').remove();
        });
        $('.step2 .form-imgs').on('click', '.img-line .img-box', function() {
            var obj = this;
            setTimeout(function() {
                $(obj).parents('.img-line').addClass('move').parents('.form-imgs').addClass('move');
            }, 10);

        });
        $('.step2 .btn-add-img').click(function() {
            $('.step2 .form-imgs > .img-line:last-child input[type=file]').click();
        });
        $('.step2 .form-imgs').on('change', '.img-line input[type=file]', function() {
            // 异步上传图片请求返回的url地址
            var url = '../images/demo/demo-p-1.jpg'; // 本地测试数据
            addNewImgPreview(url);
        })

        $(".btn-submit-all").tap(function() {
            var dia = $.dialog({
                title: '温馨提示',
                content: '天数与清单项提交审核后不可修改',
                button: ["确认", "取消"]
            });
            dia.on("dialog:action", function(e) {
                console.log(e.index)
            });
            dia.on("dialog:hide", function(e) {
                console.log("dialog hide")
            });
        })
        $(".btn-save-all").tap(function() {
            var dia = $.dialog({
                title: '保存成功',
                content: '您保存的项目可在 "个人中心" - "我发起的" 中继续编辑。',
                button: ["继续编辑", "去看看"]
            });
            dia.on("dialog:action", function(e) {
                console.log(e.index)
            });
            dia.on("dialog:hide", function(e) {
                console.log("dialog hide")
            });
        })

        if (sessionStorage.getItem('lanuchTitleHide') == null) {
            $('.step2 p.hint').show();
            $('.u-ic-close').click(function(){
            $('.step2 p.hint').hide();
                sessionStorage.setItem('lanuchTitleHide', true);
            });
        } else {
            $('.step2 p.hint').hide();
        }
    })();

    function goStep(n) {
        $('.step.step' + n).show().siblings('.step').hide();
    }

    function checkWords(obj, n) {
        n = parseInt(n);
        var c = 0;
        if ($(obj).val().length > n) {
            c = 0;
        } else {
            c = n - $(obj).val().length;
        }
        $(obj).siblings('.count').text(c);
    }

    // input file 的 id 以  img1 img2 img3 …… 以此类推命名
    function addNewImgPreview(url) {
        var imgs = $('.step2 .form-imgs');
        imgs.find('.img-line:last-child .img-box').css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);

        var index = parseInt(imgs.attr('data-index'));
        index++;

        var html = '<div class="img-line ui-border-t"><input type="file" id="' + index + '"><div class="img-box"><img class="move-top" src="../images/btn-move-top.png" alt=""><img class="move-down" src="../images/btn-move-down.png" alt=""></div><div class="content"><b class="btn-del">&times;</b><textarea placeholder="照片描述"></textarea></div></div>'

        imgs.attr('data-index', index).append(html);
    }

    function compStep2() {
        $('#linkStep2').val($('.step2 .detail-content textarea').val());
        goStep(1);
    }

    function compStep3() {
        $('#linkStep3').val($('.step3 .total .price.all').text());
        goStep(1)
    }



    function calFormNum(obj, add) {
        if (typeof add == 'undefined') {
            add = true;
        }
        correctInputNum(obj);
        var c = parseInt($(obj).val());
        c += (add ? 1 : -1);
        if (c < 1) {
            c = 1;
        } else if (c > 99) {
            c = 99;
        }
        $(obj).val(c);
    }

    function correctInputNum(obj) {
        var v = correctNum($(obj).val());
        if (v == '') {
            $(obj).val('1');
        } else {
            $(obj).val(v);
        }
    }

    function correctNum(num) {
        return (num + '').replace(/\D/g, '');
    }
    </script>
</body>

</html>
